<template>
	<view class="page" v-if="refreshType == false">
		<view class="cell-box">
			<view class="cell-item">
				<view class="left-box">
					<view class="title">
						公开程度
					</view>
				</view>
				<view class="right-box">
					<view class="hidden-status">
						{{detailInfo.isSelf == 2 ? '公开' : '保密'}}
					</view>
				</view>
			</view>
		</view>
		<view class="cell-box">
			<view class="cell-item">
				<view class="left-box">
					<view class="title">
						任务名称
					</view>
					<view class="value">
						{{detailInfo.taskName}}
					</view>
				</view>
				<view class="right-box">
					<view class="tag status">
						{{statusList[detailInfo.executeStatus].name}}
					</view>
				</view>
			</view>
			<view class="cell-item">
				<view class="left-box">
					<view class="title">
						任务内容
					</view>
					<rich-text class="value" :nodes="detailInfo.taskDetails != '' ? detailInfo.taskDetails : '——'"></rich-text>
				</view>
			</view>
		</view>
		<view class="cell-box">
			<view class="cell-item">
				<view class="left-box">
					<view class="title">
						发起人
					</view>
					<view class="value">
						<view class="user-item">
							<image class="icon" src="/static/image/people_icon.png" mode="aspectFit"></image>
							<view class="nickname">
								{{detailInfo.createUser.userName}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cell-item">
				<view class="left-box">
					<view class="title">
						负责人
					</view>
					<view class="value">
						<view class="user-item" v-for="(item,index) in detailInfo.leaders" :key="index">
							<image class="icon" src="/static/image/people_icon.png" mode="aspectFit"></image>
							<view class="nickname">
								{{item.userName}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cell-item">
				<view class="left-box">
					<view class="title">
						参与人
					</view>
					<view class="value">
						<view class="user-item" v-for="(item,index) in detailInfo.participant" :key="index">
							<image class="icon" src="/static/image/people_icon.png" mode="aspectFit"></image>
							<view class="nickname">
								{{item.userName}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cell-item">
				<view class="left-box">
					<view class="title">
						截止时间
					</view>
				</view>
				<view class="right-box">
					<view class="value">
						{{detailInfo.endTime}}
					</view>
				</view>
			</view>
			<view class="cell-item">
				<view class="left-box">
					<view class="title">
						优先级
					</view>

				</view>
				<view class="right-box">
					<view class="value">
						{{detailInfo.priority}}
					</view>
				</view>
			</view>
			<view class="cell-item">
				<view class="left-box">
					<view class="title">
						流转方式
					</view>
				</view>
				<view class="right-box radio-box">
					<view class="radio-item">
						<image class="radio-icon" src="/static/image/radio_selected_icon.png" mode="aspectFit" v-if="detailInfo.redeploy == 1">
							<image class="radio-icon" src="/static/image/radio_icon.png" mode="aspectFit" v-if="detailInfo.redeploy == 2">
						</image>
						<view class="radio-text">
							允许转派
						</view>
					</view>
					<view class="radio-item">
						<image class="radio-icon" src="/static/image/radio_selected_icon.png" mode="aspectFit" v-if="detailInfo.disassemble == 1">
						</image>
						<image class="radio-icon" src="/static/image/radio_icon.png" mode="aspectFit" v-if="detailInfo.disassemble == 2">
						</image>
						<view class="radio-text">
							允许分解
						</view>
					</view>
				</view>
			</view>
			<view class="cell-item">
				<view class="left-box">
					<view class="title">
						标签
					</view>

				</view>
				<view class="right-box">
					<view class="value">
						{{detailInfo.label}}
					</view>
				</view>
			</view>
			<view class="cell-item">
				<view class="left-box">
					<view class="title">
						关键词
					</view>

				</view>
				<view class="right-box">
					<view class="value">
						{{detailInfo.keyword}}
					</view>
				</view>
			</view>
		</view>
		<view class="cell-box">
			<view class="cell-item">
				<view class="cell-item">
					<view class="left-box">
						<view class="title">
							交付成果
						</view>

					</view>
					<view class="right-box">
						<view class="value">
							{{detailInfo.workProducts != null ? detailInfo.workProducts : ''}}
						</view>
					</view>
				</view>
				<view class="cell-item">
					<view class="left-box">
						<view class="title">
							评判标准
						</view>

					</view>
					<view class="right-box">
						<view class="value">
							{{detailInfo.evaluation != null ? detailInfo.evaluation : ''}}
						</view>
					</view>
				</view>
				<view class="cell-item">
					<view class="left-box">
						<view class="title">
							任务编号
						</view>
					</view>
					<view class="right-box">
						<view class="value">
							{{detailInfo.taskNo}}
						</view>
					</view>
				</view>
				<view class="cell-item">
					<view class="left-box">
						<view class="title">
							关联图片
						</view>
					</view>
					<view class="right-box">
						<view class="img-box">
							<image class="img-item" v-for="(item,index) in imgList" :key="index" :src="item" mode="aspectFill" @click="priviewImg(index)"></image>
						</view>

					</view>
				</view>
				<view class="cell-item">
					<view class="left-box">
						<view class="title">
							奖励金额
						</view>

					</view>
					<view class="right-box">
						<view class="value">
							{{detailInfo.bonus == null ? '' : detailInfo.bonus}}
						</view>
					</view>
				</view>
				<view class="cell-item">
					<view class="left-box">
						<view class="title">
							分值
						</view>

					</view>
					<view class="right-box">
						<view class="value">
							{{detailInfo.score == null ? '' : detailInfo.score}}
						</view>
					</view>
				</view>
				<view class="cell-item">
					<view class="left-box">
						<view class="title">
							备注
						</view>
						<view class="value">
							{{detailInfo.remark == null ? '' : detailInfo.remark}}
						</view>
					</view>
				</view>
				<view class="button-box">
					<view class="inline-box" v-if="authInfo.isLeader == true && (detailInfo.executeStatus == 0 || detailInfo.executeStatus == 1 || detailInfo.executeStatus == 2)">
						<view class="button-item" v-if="(authInfo.isLeader == true || authInfo.iscreate == true) && (detailInfo.executeStatus != 0 && detailInfo.executeStatus != 1 && detailInfo.executeStatus != 2) && detailInfo.disassemble == 1" @click="splitTask">分解</view>
						<view class="button-item" v-if="detailInfo.redeploy == 1" @click="assignment">转派</view>
						<!-- <view class="button-item" v-if="detailInfo.redeploy == 1">跨企业转派</view> -->
					</view>
					
					<view class="inline-box">
						<view class="button-item" v-if="(authInfo.isLeader == true || authInfo.iscreate == true) && (detailInfo.executeStatus == 0 || detailInfo.executeStatus == 1 || detailInfo.executeStatus == 2) && detailInfo.disassemble == 1" @click="splitTask">分解</view>
						<view class="button-item error" v-if="(authInfo.isLeader == true || authInfo.iscreate == true) && detailInfo.executeStatus == 0 || detailInfo.executeStatus == 1 || detailInfo.executeStatus == 2" @click="remarkOpen('finish')">完结</view>
						<view class="button-item" v-if="detailInfo.executeStatus == 0 && authInfo.isLeader == true" @click="remarkOpen('begin')">开始</view>
						<view class="button-item" v-if="detailInfo.executeStatus == 1" @click="remarkOpen('suspend')">暂停</view>
						<view class="button-item" v-if="detailInfo.executeStatus == 2" @click="remarkOpen('continue')">继续</view>
						<view class="button-item" v-if="detailInfo.executeStatus == 1 || detailInfo.executeStatus == 2" @click="reportOpen('finish')">完成提报</view>
						<view class="button-item" v-if="detailInfo.executeStatus == 1 || detailInfo.executeStatus == 2" @click="reportOpen('error')">异常提报</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cell-box cycle-box">
			<view class="cycle-title">
				任务周期
			</view>
			<view class="cycle-item" :key="item.id" v-for="(item,index) in detailInfo.remakes">
				<view class="cycle-status">
					{{item.createUser}} {{item.updateTime}} {{cyclestatusList[item.operationType]}}
				</view>
				<view class="cycle-reason">
					原因：{{item.operationDesc !='' ? item.operationDesc : '无'}}
				</view>
			</view>
		</view>
		<remark v-if="remarkType" :type="type" @cancel="remarkClose" @confirm="remarkConfirm" @inputChange="inputRemarkChange"></remark>
		<report v-if="reportType" @confirm="taskForEnd" :type="type" @cancel="reportClose"></report>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import remark from '../component/remark/remark';
	import report from '../component/report/report';
	import {downloadImages,uploadImage} from '@/utils/utils.js';
	export default {
		components:{
			remark,report
		},
		data() {
			return {
				id:null,
				imgList:[],
				type:null,
				refreshType:false,// 更新状态
				remarkType:false,// 备注悬浮窗显示状态
				remarkText:'', // 备注悬浮窗文本
				reportType:false,// 提报悬浮窗显示状态
				reportText:'', // 提报悬浮窗文本
				authInfo:{
					isLeader:false,// 是否负责人
					iscreate:false, // 是否创建人
					isjoin:false , // 是否参与者
				},
				cyclestatusList:['','创建','开始','继续','暂停','完结','','完成提报','异常提报'],
				detailInfo:{},
				statusList: [{
						id: 0,
						name: "未开始" 
					},
					{
						id: 1,
						name: "进行中",
						color:'#6ea7de',
					},
					{
						id: 2,
						name: "已暂停",
						color:'#fcad4e',
					},
					{
						id: 3,
						name: "完成提报中",
						color:'#147797',
					},
					{
						id: 4,
						name: "异常提报中",
						color:'#c8443f'
					},
					{
						id: 5,
						name: "正常完成",
						color:'#7bc094'
					},
					{
						id: 6,
						name: "异常完成",
						color:'#fe0000'
					}
				]
			}
		},
		onLoad(option) {
			console.log(option);
			if(option.id){
				this.id = option.id;
				this.initTaskDetail(option);
			}
			
		},
		onShow(){
			let refreshPage = getApp().globalData.refreshPage;
			if(refreshPage == 'detail'){
				this.detailInfo = {};
				this.initTaskDetail({id:this.id});
			}
		},
		methods: {
			priviewImg:function(index){
				let imgList = this.imgList;
				uni.previewImage({
							current:index,
							urls: imgList,
						});
			},
			/**
			 * 分解任务触发事件
			 */
			splitTask:function(){
				let that = this;
				uni.navigateTo({
					url: '/pages/initiate/split/split?id='+ that.id
				});
			},
			/**
			 * 备注悬浮窗输入内容监听事件
			 */
			inputRemarkChange:function(e){
				this.remarkText = e;
			},
			/**
			 * 身份验证信息
			 */
			authCheck:function(){
				let userInfo = getApp().globalData.userInfo;
				let detailInfo = this.detailInfo;
				let authInfo = this.authInfo;
				authInfo.iscreate = false;
				authInfo.isLeader = false;
				authInfo.isjoin = false;
				userInfo.employee.forEach(res=>{
					if(res.employeeId == detailInfo.createUser.userId){
						authInfo.iscreate = true;
					}
					if(res.employeeId == detailInfo.leaders[0].userId){
						authInfo.isLeader = true;
					}
					detailInfo.participant.forEach(result=>{
						if(res.employeeId == result.userId){
							authInfo.isjoin = true;
						}
					})
				});
				this.authInfo = authInfo;
				console.log(authInfo);
			},
			/**
			 * 任务完结
			 */
			taskFinish:function(data){
				let that = this;
				api.taskFinish(data).then(res=>{
					that.initTaskDetail({id:that.id});
					getApp().globalData.refreshPage = 'detail'
				})
			},
			/**
			 * 完成/异常提报
			 */
			async taskForEnd(params){
				let that = this;
				let data = {id:that.id,remark:that.reportText,images:[]};
				if(params.imgList.length > 0){
					for(let i of params.imgList){
						let res = await uploadImage(i,'file-service/upload/public');
						res = JSON.parse(res);
						if(data.images){
							data.images.push({fileName:res.data.name,fileType:'1',fileUrl:res.data.url});
						}
					}
				}
				if(params.type == 'finish'){
					data.status = 3;
				}
				if(params.type == 'error'){
					data.status = 4;
				}
				api.taskForEnd(data).then(res=>{
					getApp().globalData.refreshPage = 'detail'
					that.initTaskDetail({id:that.id});
				})
			},
			/**
			 * 改变任务状态
			 */
			changeStatus:function(data){
				let that = this;
				that.refreshType = true;
				api.taskChangeStatus(data).then(res=>{
					getApp().globalData.refreshPage = 'detail'
					that.initTaskDetail({id:that.id});
				})
			},
			/**
			 * 备注悬浮窗打开触发事件
			 */
			remarkOpen:function(e){
				this.type = e;
				this.remarkType = true;
			},
			/**
			 * 备注悬浮窗关闭触发事件
			 */
			remarkClose:function(){
				this.remarkType = false;
			},
			/**
			 * 备注悬浮窗确定触发事件
			 */
			remarkConfirm:function(e){
				let data = {id:this.id,remark:this.remarkText};
				this.remarkClose();
				if(e == 'begin'){
					data.status = 2;
				}else if(e == 'suspend'){
					data.status = 4;
				}else if(e == 'continue'){
					data.status = 3;
				}else if(e == 'finish'){
					this.taskFinish(data);
					return;
				}
				this.changeStatus(data);
			},
			/**
			 * 提报悬浮窗打开触发事件
			 */
			reportOpen:function(e){
				this.type = e;
				this.reportType = true;
			},
			/**
			 * 提报悬浮窗关闭触发事件
			 */
			reportClose:function(){
				this.reportType = false;
			},
			/**
			 * 分解任务触发事件
			 */
			splitTask:function(){
				let id = this.id
				uni.navigateTo({
					url: '/pages/initiate/split/split?id=' + id
				});
			},
			/**
			 * 初始化任务详情
			 */
			async initTaskDetail(data){
				let that = this;
				let res = await api.taskDetail(data);
				console.log('res',res);
				that.detailInfo = res.data;
				that.authCheck();
				if(res.data.images.length> 0){
					let list = [];
					let results = null;
					for(let i of res.data.images){
						results = await downloadImages(i.url);
						list.push(results.tempFilePath);
					}
					that.imgList = list;
				}
				that.refreshType = false;
			},
			/**
			 * 转派触发事件
			 */
			assignment:function(){
				let that = this;
				uni.navigateTo({
					url: '/pages/initiate/personnel/personnel?selectedType=radio&taskid='+ that.detailInfo.id,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f1f1f1;

		.cell-box {
			margin-bottom: 20rpx;
			.cycle-title{
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 30rpx;
			}
			.cell-item {
				width: 100%;
				font-size: 30rpx;
				background-color: white;
				padding: 0 20rpx;
				overflow: hidden;
				line-height: 100rpx;
				box-sizing: border-box;

				.left-box {
					float: left;
					display: flex;

					.title {
						white-space: nowrap;
					}

					.value {
						color: #9d9d9d;
						margin: 30rpx 0;
						display: flex;
						line-height: 40rpx;
						margin-left: 30rpx;

						.user-item {
							width: 100rpx;
							margin-right: 30rpx;

							.icon {
								display: block;
								width: 80rpx;
								height: 80rpx;
								margin: 0 auto;
							}

							.nickname {
								text-align: center;
								line-height: 60rpx;
							}
						}
					}
				}
				
				.right-box {
					float: right;
					display: flex;
					.hidden-status{
						color:red;
					}
					.tag {
						font-size: 24rpx;
						line-height: 40rpx;
						padding: 0 10rpx;
						border: 1px solid #3f6ce1;
						border-radius: 10rpx;
						margin: 30rpx 0;
					}

					.value {
						color: #9d9d9d;
						margin: 30rpx 0;
						display: flex;
						line-height: 40rpx;
						margin-left: 30rpx;
					}

					.img-box {
						display: flex;
						margin: 20rpx 0;

						.img-item {
							width: 60rpx;
							height: 60rpx;
							margin-bottom: 20rpx;
							margin-right: 20rpx;
						}

						.img-item:last-child {
							margin-right: 0;
						}
					}
				}

				.radio-box {
					display: flex;

					.radio-item {
						display: flex;
						margin-right: 60rpx;

						.radio-icon {
							width: 40rpx;
							height: 40rpx;
							margin: 30rpx 0;
						}

						.radio-text {
							margin-left: 10rpx;
						}
					}

					.radio-item:last-child {
						margin-right: 0;
					}
				}
			}
			.button-box{
				border-top: 1px solid #f1f1f1;
				padding: 20rpx 0;
				.button-item{
					background-color: #3c5dc4;
					text-align: center;
					width: 100%;
					border-radius: 10rpx;
					line-height: 60rpx;
					color: white;
					font-size: 28rpx;
					margin-bottom: 20rpx;
				}
				.error{
					background-color: red;
				}
				.inline-box{
					display: flex;
					justify-content: space-between;
					.button-item{
						margin-right: 20rpx;
					}
					.button-item:last-child{
						margin-right: 0;
					}
				}
				
			}
		}
		.cycle-box{
			background-color: white;
			.cycle-title{
				line-height: 100rpx;
			}
			.cycle-item{
				box-sizing: border-box;
				padding: 0 20rpx;
				margin-bottom: 20rpx;
				.cycle-status{
					font-size:30rpx;
				}
				.cycle-reason{
					font-size: 24rpx;
					color:#d0d0d0;
				}
			}
		}
	}
</style>
